<template>
    <div class="content">
        <div class="title-item">
            <span class="left">确诊人员</span>
            <span class="right"></span>
        </div>
        <div class="diagnosis">
            <van-row>
                <van-col class="diagnosis-item" span="12" v-for="item in definiteInfoList" :key="item.serial_num">
                    <div class="diagnosis-boder">
                        <van-row>
                            <van-col class="pd" span="24">
                                姓名：<span>{{item.name}}</span>
                            </van-col>
                            <van-col class="pd" span="12">
                                性别：<span>{{item.sex}}</span>
                            </van-col>
                            <van-col class="pd" span="12">
                                年龄：<span>{{item.age}}</span>
                            </van-col>
                            <van-col class="pd" span="24">
                                职业：<span>{{item.job_title}}</span>
                            </van-col>
                            <van-col class="pd" span="24">
                                <van-col span="6" > 就诊 </van-col >
                                <van-col span="2">|</van-col>
                                <van-col span="11"  @click="toTracks(item.link_addr)"> 轨迹 </van-col >
                            </van-col>
                        </van-row>
                    </div>
                </van-col>
            </van-row>
        </div>
        <!-- 轨迹弹出框-->
        <van-image-preview v-model="show" :images="trackImg"  > </van-image-preview>
    </div>
</template>

<script>
import { Dialog } from 'vant'
import { definiteInfoList } from '@/api/epidemic-surveillance'
export default {
  name: 'index',
  data () {
    return {
      definiteInfoList: [],
      show: false,
      trackImg: []
    }
  },
  methods: {
    toTracks (url) {
      if (url) {
        this.trackImg = [url]
        this.show = true
      } else {
        Dialog.alert({ message: '暂无轨迹' })
      }
    },
    init () {
      // 确诊人员信息
      definiteInfoList().then(({ data }) => {
        if (data.errcode === 0) {
          this.definiteInfoList = data.data
        } else {
          Dialog.alert({
            message: data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .chart-item-1{
        width: 100%;
        height: 240px;
    }
    .chart-item{
        width: 100%;
        height: 300px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item .left{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .title-item .right{
        float: right;
        color: gray;
        font-size: 12px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 0 10px;
    }
    .van-col {
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    .content-item{
        padding: 0 10px;
    }
    .content-item .van-row{
        border: 1px solid #dddddd;
        border-radius: 5px;
        padding: 0 10px 10px 10px;
        font-size: 12px;
        background-color: #ffffff;
    }
    .content-item .time-item{
        font-size: 10px;
        text-align: right;
        padding: 10px 0 0 0;
    }
    .content-item>.van-row>.van-col.van-col--4>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--6>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--8>.van-col.van-col--24{
        padding: 4px 0;
        text-align: center;
    }
    .content-item>.van-row>.van-col.van-col--4{
        padding: 0 2px;
        width: 20%;
    }
    .content-item>.van-row>.van-col.van-col--6{
        padding: 0 2px;
    }
    .content-item>.van-row>.van-col.van-col--8{
        padding: 0 2px;
    }
    .num{
        font-size: 14px;
    }
    .title-name{
        background: #dddddd;
    }
    .add-item{
        font-size: 10px;
    }
    .color-oranged{
        color: orangered;
    }
    .color-orange{
        color: orange;
    }
    .color-green{
        color: rgb(40, 183, 163);
    }
    .color-gray{
        color: gray;
    }
    .color-blue{
        color: rgb(51, 102, 255);
    }
    .table-item .van-col.van-col--4{
        width: 20%;
        font-size: 12px;
    }
    .van-icon.van-icon-chart-trending-o{
        font-size: 14px;
    }
    .diagnosis{
        padding: 0 10px;
    }
    .diagnosis .diagnosis-item{
        padding: 0 2px;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder{
        border: 1px solid #8b0000;
        border-top: 5px solid #8b0000;
        padding: 10px;
        font-size: 12px;
        margin-bottom: 5px;
        background-color: #ffffff;
    }
    .diagnosis .van-col.van-col--12 .diagnosis-boder span{
        font-weight: bold;
    }
    .pd{
        padding: 0 0 5px 0;
    }
    .van-row .pd:last-child{
        padding: 0;
    }
    .van-row .pd  .van-col{
        padding: 0;
    }
    .echart{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin: 10px 0;
    }
    /*.demo-dialog img{*/
    /*    box-sizing: border-box;*/
    /*    width: 100%;*/
    /*    padding: 25px 20px 0;*/
    /*}*/
</style>
